<template>
	<view class="page_content">
		<view class="head_content">
			<!-- 顶部账户详情 -->
			<view class="tops">
				<view class="tops-left">
					<view class="my-gold">
						我的金币
					</view>
					<view class="nums">
						{{userinfo.nums || 0}}
					</view>
					<view class="scale">
						{{userinfo.exchange}}
					</view>
				</view>
				<view class="tops-right" @click="open">
					去兑换
				</view>
			</view>
			<!-- 签到赚金币 -->
			<view class="sign">
				<view class="quest-title">
					特别说明
				</view>
				<view class="texts">
					<view>1、金币可以兑换成看点币用于观看短剧</view>
					<view>2、金币属于虚拟物品不可提现、 不可转赠</view>
					<view class="ship" @click="shipList">
						<view>
							3、金币可以用户兑换商城物品
						</view>
						<view class="ship-name">
							商城物品 >
						</view>
					</view>
				</view>
			</view>
			<!-- 签到数据 -->
			<view class="data-num">
				<view class="data-num-tabs">
					<uv-tabs :list="list" lineWidth="30" lineColor="#FF0066" :activeStyle="{
								color: '#333',
								fontWeight: 'bold',
								transform: 'scale(1.05)'
					    	}" :inactiveStyle="{
								color: '#606266',
								transform: 'scale(1)'
							}" itemStyle="padding-left: 22px; padding-right: 22px; height: 34px;" style="margin: 0 auto;"
						@click="tabClick"></uv-tabs>
				</view>
				<!-- 一级 -->
				<view class="acc_bot" v-if="current == 0">
					<uv-empty v-if="firstTeamLength == 0" mode="data"
						icon="https://cdn.uviewui.com/uview/empty/data.png" text="暂无数据"></uv-empty>
					<view class="bot_list">
						<u-list @scrolltolower="scrolltolower" height="100%">
							<u-list-item v-for="item in welfareList" :key="item.id">
								<u-cell :border="false">
									<view class="list_left" slot="title">
										<view class="left">
											<view class="left_rech">
												{{item.welfareName}}
											</view>
											<view class="left_time">
												{{time(item.createTime)}}
											</view>
										</view>
									</view>
									<view slot="value" class="list_right">
										<view class="right">
											<view class="right_gold">
												+{{item.currencyQuantity}}金币
											</view>
										</view>
									</view>
								</u-cell>
							</u-list-item>
						</u-list>
					</view>
				</view>
				<!-- 二级 -->
				<view class="two_bot" v-if="current == 1">
					<uv-empty v-if="twoTeamLength == 0" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"
						text="暂无数据"></uv-empty>
					<view class="bot_list">
						<u-list @scrolltolower="scrolltolower" height="100%">
							<u-list-item v-for="items in monetaryExchangeList" :key="items.id">
								<u-cell :border="false">
									<view class="list_left" slot="title">
										<view class="left">
											<view class="left_rech">
												金币余额-{{items.currencyQuantity}}
											</view>
											<view class="left_time">
												{{time(items.createTime)}}
											</view>
										</view>
									</view>
									<view slot="value" class="list_right">
										<view class="right">
											<view class="right_gold">
												+{{items.currencyQuantity/userinfo.exchangeRatio}}看点币
											</view>
										</view>

									</view>
								</u-cell>
							</u-list-item>
						</u-list>
					</view>
				</view>
				<!-- 分成 -->
				<view class="divide_bot" v-if="current == 2">
					<uv-empty v-if="divideLength == 0" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"
						text="暂无数据"></uv-empty>
					<view class="bot_list">
						<u-list @scrolltolower="scrolltolower" height="100%">
							<u-list-item v-for="items in goodsExchangeList" :key="items.id">
								<u-cell :border="false">
									<view class="list_left" slot="title">
										<view class="left">
											<view class="left_rech">
												{{items.goodsName}}
											</view>
											<view class="left_time">
												{{time(items.createTime)}}
											</view>
										</view>
									</view>
									<view slot="value" class="list_right">
										<view class="right_time">
											-{{items.currencyQuantity}}金币
										</view>
									</view>
								</u-cell>
							</u-list-item>
						</u-list>
					</view>
				</view>
				<!-- 提现 -->
				<!-- 		<view class="Withdraw" v-if="current == 3">
					<uv-empty v-if="WithdrawsLength == 0" mode="data"
						icon="https://cdn.uviewui.com/uview/empty/data.png" text="暂无数据"></uv-empty>
					<view class="bot_list">
						<u-list @scrolltolower="scrolltolower" height="100%">
							<u-list-item v-for="item in Withdraws" :key="item.id">
								<u-cell :border="false">
									<view class="list_left" slot="title">
										<view class="left">
											<view class="left_rech">
												-{{item.withdrawAmount}}
											</view>
											<view class="left_time">
												提现时间：{{item.withdrawTime}}
											</view>
										</view>
									</view>
									<view slot="value" class="list_right">
										<view class="right">
											<view class="right_gold" v-if="item.withdrawState == 2">
												提现成功
											</view>
											<view class="right_order" v-else>
												待审核
											</view>
										</view>
									</view>
								</u-cell>
							</u-list-item>
						</u-list>
					</view>
				</view> -->
			</view>
		</view>
		<view>
			<uv-popup ref="popup" mode="bottom" custom-style="min-height: 800rpx;" round="18">
				<view class="popup-box">
					<view class="popup-title">
						金币兑换
					</view>
					<uv-form labelPosition="top" :model="amountData" :rules="rules" ref="form" labelWidth="88">
						<uv-form-item label="兑换数量" prop="currencyQuantity" borderBottom>
							<uv-input v-model="amountData.currencyQuantity" border="none" :placeholder="placeholder">
							</uv-input>
						</uv-form-item>
					</uv-form>
					<button type="default" class="top_btn" @click="submit">确认提现</button>
				</view>
			</uv-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amountData: {
					currencyQuantity: '',
					memberId: uni.getStorageSync('id'),
					sysOrgCode: uni.getStorageSync('sysOrgCode')
				},
				rules: {
					'currencyQuantity': {
						type: 'number',
						required: true,
						message: '请填写兑换数量',
						trigger: ['blur', 'change']
					},
				},
				current: 0,
				placeholder: '',
				list: [{
					name: '福利记录'
				}, {
					name: '币值兑换'
				}, {
					name: '商品兑换'
				}],
				userinfo: {
					nums: 0,
					exchange: '',
					exchangeRatio: 0
				},
				welfareList: [],
				monetaryExchangeList: [],
				goodsExchangeList: []
			}
		},
		onLoad() {},
		mounted() {
			this.getMyGoldCoins()
			this.getWelfareList()
		},
		computed: {
			exchangePrice() {
				const price = Math.floor(this.userinfo.nums / this.userinfo.exchangeRatio)
				this.placeholder = '最少输入1最多输入' + price
			}
		},
		methods: {
			goDetails() { // 示例参数值
				// 跳转至详情页面，并携带参数
				uni.navigateTo({
					url: `/pages/home/bonus/infos/infos` // 使用 query 参数传递数据
				});
			},
			time(dateString) {
				// 日期字符串
				// 使用 Date 对象解析日期字符串
				const times = new Date(dateString);
				// 获取年、月、日
				let year = times.getFullYear();
				let month = String(times.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的月份是从0开始的，所以需要+1
				let day = String(times.getDate()).padStart(2, '0');
				return year + '.' + month + '.' + day
			},
			open() {
				this.$refs.popup.open();
			},
			submit() {
				this.$refs.form.validate().then(res => {
					const obj = this.amountData
					this.$request('signin.signinBalanceExchange', {
						...obj
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '兑换成功！'
							});
							this.$refs.popup.close();
							this.amountData.currencyQuantity = ''
							this.getMyGoldCoins()
						}
					})

				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '输入错误！'
					});
				});
			},
			shipList() { // 示例参数值
				uni.navigateTo({
					url: `/pages/home/bonus/mall/mall` // 使用 query 参数传递数据
				});
			},
			getMyGoldCoins() {
				this.$request('signin.signinGoidConins', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id')
				}).then(res => {
					if (res.code == 200) {
						this.userinfo.nums = res.result.totalPrice
						this.userinfo.exchange = res.result.exchange
						this.userinfo.exchangeRatio = res.result.exchangeRatio
					}

				})
			},
			tabClick(item) {
				console.log("item", item)
				this.current = item.index
				if (this.current == 0) {
					this.getWelfareList()
				} else if (this.current == 1) {
					this.getMonetaryExchangeList()
				} else if (this.current == 2) {
					this.getGoodsExchangeList()
				} else if (this
					.current == 3) {}
				console.log("this.current", this.current)
			},
			// 一级推广列表查询
			// getOneLevelPublicize() {
			// 	this.$request('cpsdist.oneLevelPublicize', {
			// 		memberId: uni.getStorageSync('id')
			// 	}).then(res => {
			// 		if (res.code != 200 && res.message != "") {
			// 			uni.showToast({
			// 				title: res.message,
			// 				icon: 'error',
			// 				duration: 2000,
			// 				position: 'center'
			// 			});
			// 		}
			// 		this.firstTeam = res.result
			// 		this.firstTeamLength = res.result.length
			// 		console.log('一级推广列表查询:', res);
			// 	})
			// },
			// 参与任务列表
			// getPublicizeDataRecordList() {
			// 	this.$request('cpsdist.publicizeDataRecordList', {
			// 		sysOrgCode: uni.getStorageSync('sysOrgCode'),
			// 		memberId: uni.getStorageSync('id')
			// 	}).then(res => {
			// 		if (res != 200 && res.message != "") {
			// 			uni.showToast({
			// 				title: res.message,
			// 				icon: 'error',
			// 				duration: 2000,
			// 				position: 'center'
			// 			});
			// 		}
			// 		this.contentList = res.result
			// 		this.length = res.result.length
			// 		console.log('参与任务列表:', res);
			// 	})
			// },
			getWelfareList() {
				this.$request('signin.signinWelfareList', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id')
				}).then(res => {
					if (res != 200 && res.message != "") {
						uni.showToast({
							title: res.message,
							icon: 'error',
							duration: 2000,
							position: 'center'
						});
					}
					this.welfareList = res.result
					this.length = res.result.length
					console.log('参与任务列表:', res);
				})
			},
			getMonetaryExchangeList() {
				this.$request('signin.signinMonetaryExchangeList', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id')
				}).then(res => {
					if (res != 200 && res.message != "") {
						uni.showToast({
							title: res.message,
							icon: 'error',
							duration: 2000,
							position: 'center'
						});
					}
					this.monetaryExchangeList = res.result
					this.length = res.result.length
					console.log('参与任务列表:', res);
				})
			},
			getGoodsExchangeList() {
				this.$request('signin.signinGoodsExchangeList', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id')
				}).then(res => {
					if (res != 200 && res.message != "") {
						uni.showToast({
							title: res.message,
							icon: 'error',
							duration: 2000,
							position: 'center'
						});
					}
					this.goodsExchangeList = res.result
				})
			}
		}
	}
</script>

<style lang="scss">
	@import 'infos.scss'
</style>